<template>
  <!-- 全局加载状态 -->
  <div v-if="isLoading" class="global-loading flex-col">
    <el-icon class="loading-icon" :size="32"><Loading /></el-icon>
    <span class="loading-text block text-gray-500 mt-2 text-sm">加载中...</span>
  </div>
  <!-- 错误边界 -->
  <ErrorBoundary v-else>
    <!-- 主题提供器 -->
    <el-config-provider :locale="zhCn" :size="appStore.size">
      <RouterView />
    </el-config-provider>
  </ErrorBoundary>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Loading } from "@element-plus/icons-vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import ErrorBoundary from "@/components/ErrorBoundary.vue";
import { useAppStore } from "@/stores/app";
// import { useUserStore } from '@/stores/user'

const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
// const userStore = useUserStore()
const isLoading = ref(false);

// 初始化应用
onMounted(async () => {
  console.log("应用初始化");
  isLoading.value = true;
  try {
    // await Promise.all([
    //   appStore.initTheme(),
    //   userStore.token && userStore.fetchUserInfo()
    // ])
  } catch (error) {
    console.error("应用初始化失败:", error);
  } finally {
    setTimeout(() => {
      isLoading.value = false;
    }, 1000);
  }
});
</script>

<style lang="scss" scoped>

/* 页面切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
